<!-- 地图地点多个选择组件 -->
<template>
    <el-dialog 
      v-el-drag-dialog="{drag: true, full: false, resize: false}"
      title="选择地点" 
      :visible="true"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      @close="closeMd"
      width="420px"
    >
        <el-form style="padding-top: 10px;">
            <el-form-item>
                <MapPointInp 
                    :name="name" 
                    :placeholder="placeholder" 
                    :defList="[]" 
                    @handleSel="selPoint" 
                    :point="currPoint"
                    style="width: 400px;"
                />
            </el-form-item>

            <el-form-item 
                class="poi-list"
            >
                <el-tag
                    v-for="(tag, i) in poiList"
                    :key="tag.id"
                    closable
                    size="medium"
                    @close="delTag(i, tag)"
                >{{tag.name}}</el-tag>
            </el-form-item>

            <div class="fm-btns">
                <div class="btns">
                    <el-button type="primary" @click.native="savePoints">确 认</el-button>
                </div>
                <div class="fun-explain">说明：如需要修改，请先删除再添加，可以拖动排序</div>
            </div>
        </el-form>

    </el-dialog>
</template>

<script>
import Sortable from 'sortablejs';
import elDragDialog from '@/directive/el-drag-dialog';
import MapPointInp from '@/components/MapPointInp';

export default {
  name: 'MapPoints',
  directives: { elDragDialog },
  components: { MapPointInp },
  props: {
    name: {         // 地点名称，区分相同地点
        type: String,
        default: ''
    },
    placeholder: {  // 提示文本
        type: String,
        default: '请输入地点关键字'
    },
    points: {       // 默认显示的地点列表
        type: Array,
        default: () => []
    }
  },
  data() { 
    return {
        poiList: this.points,
        currPoint: null // 当前选中地点
    }
  },
  mounted() {
    const that = this;

    setTimeout(() => { that.tagSort(); }, 500);
  },
  methods:{
    // 标签-拖动排序
    tagSort() {
        const that = this;
        
        const el = document.querySelector('.poi-list .el-form-item__content');
        Sortable.create(el, {
            ghostClass: 'sortable-ghost',
            onEnd: evt => {
                const targetRow = that.poiList.splice(evt.oldIndex, 1)[0];
                that.poiList.splice(evt.newIndex, 0, targetRow);
            }
        });
    },
    
    closeMd(){// 关闭弹框
        const that = this;

        that.$emit('getMdState', {state: false, name: that.name, points: that.points});
    },
    selPoint(e){ // 选中某一个地点
        const that = this;
        
        if(e.p){
            let index = that.poiList.findIndex(it => {
                return it.id == e.p.id;
            });
            if(index == -1) that.poiList.push(e.p);
        }
    },
    // 编辑
    editTag(i, tag){
        const that = this;
        
        that.currPoint = tag;
    },
    // 删除
    delTag(i, tag){
        const that = this;

        that.U.qconfim(`确定删除[${tag.name}]地点吗？`).then(r => {
            if(r){
                that.poiList.splice(i, 1);
            }
        });
    },
    // 保存-选择的地点列表
    savePoints(){
        const that = this;

        // if(that.poiList.length == 0){
        //     that.U.qerror('至少选择一个地点');
        // }else{
            that.$emit('getMdState', {state: false, name: that.name, points: that.poiList});
        // }
    }


  }
}
</script>

<style lang="less" scoped>
.poi-list{
    border: 1px solid #efefef; 
    border-radius: 5px; 
    padding: 0px 5px 5px 5px;
    min-height: 50px;

    ::v-deep {
        .sortable-ghost {
            opacity: .8;
            color: #fff !important;
            background: #42b983 !important;
        }

        .el-tag {
            margin: 10px 10px 5px 0px;
            cursor: pointer;
        }
    }
}
</style>